@charset "utf-8";
@import "_iconfont";
*{
    margin:0;
    padding:0;
}
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
#web{
    width:r(750);
    height:100%;
    position:relative;
}
header{
    width:100%;
    height:px(105);
    overflow: hidden;
    .back_btn{
        width:r(120);
        height:100%;
        margin-left:r(23);
        input{
            width:r(123);
            height:px(57);
            line-height: px(57);
            text-align: center;
            margin-top:px(24);
            border:1px solid #ff9344;
            border-radius: px(20);
            background: #fff;
        }
    }
    p{
        text-align:center;
        line-height:px(105);
        font-size:25px;
    }
    .selectBar{
        width:px(62);
        height:px(56);
        margin-right:r(18);
        margin-top:r(15);
        img{
            display: block;
            width:100%;
        }
        
    }
}
.section{
    width:100%;
    position: absolute;
    top:px(105);
    bottom:px(150);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .my_login{
        width:r(710);
        height:r(170);
        margin:r(17) auto r(27);
        .login_img{
            width:r(170);
            height:r(170);
            
            img{
                display: block;
                width:100%;
                border-radius: 50%;
            }
        }
        .login_p{
            width:r(42);
            height:r(170);
            line-height: r(170);
            font-size:40px;
            font-weight: 600;
        }
        .login_text{
            width:r(494);
            height:r(170);
            h4{
                width:r(469);
                margin-left:r(25);
                font-weight: 500;
                margin-top:r(34);
            }
            p{
                width:r(469);
                margin-top:r(34);
                margin-left:r(25);
                font-size:14px;
                color:#666;
            }
        }
    }
    .my_comment{
        width:r(710);
        height:r(152);
        margin:auto;
        ul{
            width:100%;
            height:r(152);
            li{
                float:left;
                width:r(196);
                height:100%;
                margin-right:r(61);
                background:#b2e0a0 url("../images/my_yun.png");
                background-repeat: no-repeat;
                background-position: center r(19);
                background-size: r(78) r(82);
                a{
                    display: block;
                    width:100%;
                    height:100%;
                }
                p{
                    font-size:16px;
                    text-align: center;
                    margin-top:r(-44);
                }
            }
            #my_li{
                background:#a0dce0 url("../images/my_xing.png");
                background-repeat: no-repeat;
                background-position: center r(19);
                background-size: r(78) r(82);
            }
            #my_li1{
                margin-right:0;
                background:#e0b7a0 url("../images/my_fangxing.png");
                background-repeat: no-repeat;
                background-position: center r(19);
                background-size: r(124) r(72);
            }
        }
    }
    .cheap{
        width:100%;
        height:r(75);
        margin-top:r(45);
        .cheap_text{
            float:left;
            width:r(250);
            height:px(75);
            line-height:px(75);
            font-size: 16px;
            padding-left:px(120);
            background: url(../images/found_03.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .cheap_more{
            float: right;
            width:r(116);
            height:px(75);
            font-size: 16px;
            line-height:px(75);
            font-size: 16px;
            padding-right:r(10);
            background: url(../images/more.png)no-repeat;
            background-size:px(38) px(38);
            background-position:right px(16) top px(18);
        }
        .money{
            background: url(../images/my_money.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .comment{
            background: url(../images/my_cloud.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .friend{
            background: url(../images/my_search.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .footer{
            background: url(../images/my_circle.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .shezhi{
            background: url(../images/my_gongju.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
        .concact{
            background: url(../images/my_tel.png)no-repeat;
            background-size:px(79) px(75);
            background-position:left px(28) top 0;
        }
    }
    .my_btn{
        width:r(710);
        height:r(77);
        margin:r(35) auto r(20);
        input{
            width:r(147);
            height:r(77);
            line-height: r(77);
            text-align: center;
            background:#ff9344;
            border-radius: px(50);
            color:#fff;
        }
        .btn_out{
            margin-left:r(90);
        }
        .btn_cancle{
            margin-right:r(90);
        }
    }
}
// 脚部样式
footer{
    width:100%;
    height:px(150);
    position: absolute;
    bottom:0;
    li{
        width:25%;
        float:left;
        i{
            width:100%;
            height:px(100);
            line-height: px(100);
            display: block;
            text-align: center;
        }
        .iconfont{
            font-size:px(50);
            color:#fe9241;
        }
        p{
            text-align: center;
            font-size:14px;
            font-family: "微软雅黑";
            color:#000;
        }
    }
}
// 媒体查询
@media screen and (min-width:320px) and (max-width:375px){
    header{
        p{
            font-size:16px;
        }
    }
    .section{
        .my_comment{
            ul{
                li{
                    p{
                        font-size:14px;
                    }
                }
            }
        }
        .cheap{
            width:100%;
            height:r(75);
            margin-top:r(45);
            .cheap_text{
                font-size: 14px;
                background-size:px(70) px(68);
            }
            .cheap_more{
                font-size: 14px;
                background-position:right px(10) top px(18);
            }
            .love{
                background-size:px(70) px(68);
            }
        }
    }
    
}
@media screen and (min-width:768px){
    header{
        height:px(150);
        p{
            line-height:px(150);
            font-size:18px;
        }
        .back_btn{
            input{
                width:px(140);
                height:px(67);
                line-height: px(67);
                margin-top:px(40);
            }
        } 
        .selectBar{
            width:px(70);
            height:px(64);
            margin-right:r(18);
            margin-top:r(20);
            img{
                display: block;
                width:100%;
            }
            
        }
    }
    .section{
        top:px(150);
        .my_login{
            .login_text{
                h4{
                    font-size:30px;
                }
                p{
                    font-size:16px;
                }
            }
        }
        .cheap{
            .cheap_text{
                font-size: 18px;
            }
            .cheap_more{
                width:r(60);
                font-size: 18px;
                
            }
        }
        .my_btn{
            input{
              font-size:20px;
            }
        }
    }
    footer{
        li{
            p{
                font-size:16px;
            }
        }
    }
    
}
